<template>
	<view class="login">
		<view class="title">
			{{ isLogin ? "登录" : "注册"}}
		</view>
		<view class="form">
			<form>
				<view class="item">
					<div class="label">账号</div>
					<input class="uni-input" v-model="userInfo.userName" placeholder="请输入账号" />
				</view>
				<view class="item" v-if="!isLogin">
					<div class="label">手机号</div>
					<input class="uni-input" v-model="userInfo.phoneNumber" placeholder="请输入手机号码" />
				</view>
				<view class="item">
					<div class="label">密码</div>
					<input class="uni-input" v-model="userInfo.password" password placeholder="请输入密码" />
				</view>
				<view class="item" v-if="!isLogin">
					<div class="label">确认密码</div>
					<input class="uni-input" v-model="userInfo.comfirmPassword" password placeholder="请再次输入密码" />
				</view>
				<view class="btns">
					<button class="btn lo" v-show="isLogin" @click="loginHandle">登录</button>
					<button class="btn re" v-show="isLogin" @click="goRegistHandle">去注册</button>
					<button class="btn lo" v-show="!isLogin" @click="registHandle">注册</button>
					<button class="btn lo" v-show="!isLogin" @click="goLogin">已有账号，去登录</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		login,
		register
	} from "@/api/user.js"
	export default {
		data() {
			return {
				isLogin: true,
				showPassword: false,
				userInfo: {
					phoneNumber: "",
					userName: "",
					password: "",
					comfirmPassword: "",
					checked: false,
					type: 0
				}
			};
		},
		methods: {
			switchChange() {
				this.userInfo.checked = !this.userInfo.checked
			},
			async loginHandle() {
				if (!this.userInfo.userName || !this.userInfo.password) {
					uni.showToast({
						title: "表单不完整",
						icon: "error"
					})
					return
				}

				const res = await login({
					userName: this.userInfo.userName,
					password: this.userInfo.password,
				})


				if (res.code === 200) {
					uni.showToast({
						title: "登入成功",
						icon: "success"
					})

					try {
						uni.setStorageSync('userInfo', {
							userName: res.data.userName,
							phoneNumber: res.data.phoneNumber,
							userId: res.data.id,
						});
						uni.setStorageSync('token', res.data.token);
					} catch (e) {
						// error
					}

					setTimeout(() => {

						uni.reLaunch({
							url: "/pages/index/index"
						})


					}, 1000)
					return
				}
				console.log(res)

				uni.showToast({
					title: res.msg,
					icon: "error"
				})
			},
			goRegistHandle() {
				this.isLogin = false
			},
			goLogin() {
				this.isLogin = true
			},
			async registHandle() {
				console.log(this.userInfo)
				if (!this.userInfo.phoneNumber || !this.userInfo.userName || !this.userInfo.password || !this.userInfo
					.comfirmPassword) {
					uni.showToast({
						title: "表单不完整",
						icon: "error"
					})
					return
				}

				if (this.userInfo.password !== this.userInfo.comfirmPassword) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "error"
					})
					return
				}

				this.userInfo.type = this.userInfo.checked ? 1 : 0;

				const res = await register({
					userName: this.userInfo.userName,
					phoneNumber: this.userInfo.phoneNumber,
					password: this.userInfo.password,

				})

				console.log(this.userInfo)

				if (res.code === 200) {
					this.isLogin = true
					uni.showToast({
						title: "注册成功",
						icon: "error"
					})
					return
				}

				Notify({
					type: 'error',
					message: res.msg
				});
				uni.showToast({
					title: res.msg,
					icon: "error"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		padding-top: 20%;
		box-sizing: border-box;

		.title {
			margin-bottom: 50rpx;
			font-size: 50rpx;
			font-weight: bold;
		}

		.form {
			width: 100%;
			padding: 0 10%;
			box-sizing: border-box;

			form {
				width: 100%;

				.btns {
					margin-top: 60rpx;

					.btn {
						margin-top: 30rpx;
						color: #fff;
						border: none;
					}

					.lo {
						background-color: #1989FA;
					}

					.re {
						background-color: #fff;
						color: #000;
					}
				}

				.item {
					width: 100%;
					height: 80rpx;
					border-bottom: 1px solid #eee;
					box-sizing: border-box;
					padding: 5rpx;
					display: flex;
					align-items: center;
					margin-top: 50rpx;

					.uni-input {
						flex: 1;
						height: 100%;
						margin-left: 40rpx;
					}

					.label {
						width: 120rpx;
					}
				}


			}

		}
	}
</style>